import Input from "./Subs/Input";
import List from "./Subs/List";
import { IInputOptions, IListOptions, ITodoData } from "./typings";

/**
 * 组件首页入口文件：
 */
class TodoList {
  private el: HTMLElement
  private todoData: ITodoData[]
  private todoWrapper: HTMLElement

  private input: Input
  private list: List

  constructor(el: HTMLElement, todoData: ITodoData[]) {
    this.el = el
    this.todoData = todoData
    this.todoWrapper = document.createElement('div')
  }

  // 类的init函数：
  public init() {
    this.createComponents()
    this.render()
    this.bindEvent()
  }

  private createComponents() {
    this.input = new Input(<IInputOptions>{
      wrapperEl: this.todoWrapper,
      placeholderText: '请输入todo',
      buttonText: '新增'
    })

    this.list = new List(<IListOptions>{
      todoData: this.todoData,
      wrapperEl: this.todoWrapper
    })

  }

  private render() {
    this.input.render()
    this.list.render()
    this.el.appendChild(this.todoWrapper)
  }

  private bindEvent() {
    this.input.bindEvent()
    this.list.bindEvent()
  }

}

export default TodoList